<template>
    <div>
        <a-flex wrap="wrap" gap="small">
            <div v-for="(item) in skuData" :key="item.SKUID" class="goods_box">
                <div class="imgbox">
                    <img width="100%" :src="item.image" alt="">
                    <div class="image-mask">
                        <div class="image-mask-info">
                            <a-button type="primary" @click="downSKUpic(item)">下载
                            </a-button>
                        </div>
                    </div>
                </div>
                <a-flex wrap="wrap" gap="small">
                    <a-flex justify="space-between" style="width: 100%;">
                        <div>价格</div>
                        <div>{{ item.price }}</div>
                    </a-flex>
                    <a-flex justify="space-between" style="width: 100%;">
                        <div>SKUID</div>
                        <div>{{ item.SKUID }}</div>
                    </a-flex>
                    <a-flex justify="space-between" style="width: 100%;">
                        <div>库存</div>
                        <div>{{ item.query }}</div>
                    </a-flex>
                    <a-flex v-for="itm in item.skuVal" :key="itm" justify="space-between" style="width: 100%;">
                        <div>{{ itm.key }}</div>
                        <div>{{ itm.value }}</div>
                    </a-flex>
                </a-flex>
            </div>
        </a-flex>
    </div>
</template>
<script setup lang="ts">

import { defineProps } from 'vue';

const props = defineProps({
    skuData: {
        type: Array,
        required: true,
        default: () => []
    },
});

const skuData = props.skuData;

const downSKUpic = (item: object) => {
    fetch(item.image)
        .then(response => response.blob())
        .then(blob => {
            const url = URL.createObjectURL(blob);
            let link = document.createElement('a');
            let imageUrl = url;
            let img = new Image();
            img.src = imageUrl;
            let imageName = '';
            item.skuVal.forEach(element => {
                imageName += element.value + '-';
            });
            link.href = imageUrl; // 设置下载链接  
            link.download = imageName; // 设置下载后的文件名
            link.click(); // 触发点击事件
        })
}
</script>
<style scoped lang="less">
.goods_box {
    width: 19.3%;
    // margin: 0 5px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;

    .imgbox {
        position: relative;

        .image-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(118, 118, 118, 0.5);
            /* 半透明黑色遮罩层 */
            opacity: 0;
            /* 初始时透明 */
            transition: opacity 0.3s ease;
            /* 添加过渡效果 */

            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            cursor: pointer;
        }

        &:hover .image-mask {
            opacity: 1;
            /* 鼠标悬停时显示遮罩层 */
        }
    }
}
</style>